<template>
  <div id="select_time">
    <div class="time-button">
      <a-button type="primary" size="large" ghost @click="selectTime('0'),getSales()">全部</a-button>
    </div>
    <div class="time-button">
      <a-button type="primary" ghost size="large" @click="selectTime('1'),getSales()">今日</a-button>
    </div>
    <div class="time-button">
      <a-button type="primary" ghost size="large" @click="selectTime('2'),getSales()">昨日</a-button>
    </div>
    <div class="time-button">
      <a-button type="primary" ghost size="large" @click="selectTime('3'),getSales()">本月</a-button>
    </div>
    <div class="time-button">
      <a-button type="primary" ghost size="large" @click="selectTime('4'),getSales()">上月</a-button>
    </div>
    <div class="time-button">
      <a-button type="primary" ghost size="large" @click="selectTime('5'),getSales()">本年</a-button>
    </div>
  </div>
  <div id="selectStore">
    <span id="data">数据时间：{{dataTime.dataValue}}</span>
    <span id="store">选择门店：</span>
    <a-space>
      <a-select
        ref="select"
        v-model:value="value1.val"
        style="width: 200px"
        :options="selectData.stores"
        @focus="focus"
        @change="handleChange(value1.val)"
      ></a-select>
    </a-space>
  </div>
  <div id="statiticData">
    <div>
      <h1>销售额</h1>
      <span class="result">{{statis.sumPrice}}</span>
    </div>
    <div>
      <h1>销售毛利</h1>
      <span class="result">{{statis.pureIncome}}</span>
    </div>
    <div>
      <h1>毛利率</h1>
      <span class="result">{{statis.rateOfIncome}}</span>
    </div>
    <div>
      <h1>销售额最高的商品：{{statis.maxNumSell}}</h1>
      <h1>其销售额为：{{statis.maxPrice}}</h1>
    </div>
  </div>
  <div id="datalist">
    <a-table :dataSource="dataSource.data" :columns="columns" :pagination="pag.pagination">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'barcode'">
          <!-- <svg :id="record.barcode" /> -->
          <barcode :value="record.barcode" :width="1" :height="30" />
        </template>
      </template>
    </a-table>
  </div>
</template>

<script>
import { defineComponent, onMounted, reactive, ref } from "vue";
import { message } from "ant-design-vue";
import { getSaleList } from "@/api/sale";
import { selectStoreList } from "@/api/store";
import Barcode from "@/components/Barcode.vue";
const columns = [
  {
    title: "序号",
    dataIndex: "key",
    key: "key"
  },
  {
    title: "商品条码",
    dataIndex: "barcode",
    key: "barcode"
  },
  {
    title: "商品名称",
    dataIndex: "commodityName",
    key: "commodityName"
  },
  {
    title: "销售数量",
    dataIndex: "sellNum",
    key: "sellNum"
  },
  {
    title: "销售额",
    dataIndex: "sellPrice",
    key: "sellPrice"
  },
  {
    title: "销售日期",
    dataIndex: "sellTime",
    key: "sellTime"
  }
];
export default defineComponent({
  name: "statistic",
  components: {
    Barcode
  },
  setup() {
    const pag = reactive({
      pagination: {
        total: 50,
        defaultPageSize: 7,
        showTotal: total => `共 ${total} 条数据`,
        showSizeChanger: true,
        pageSizeOptions: ["1", "10", "15", "20"]
        // onShowSizeChange: { onShowSizeChange },
      }
    });
    const dataSource = reactive({
      data: []
    });
    const selectData = reactive({
      stores: []
    });
    const value1 = reactive({
      val: ""
    });
    const dataTime = reactive({
      dataValue: "全部"
    });

    const queryData = reactive({
      query: {
        queryTime: "0",
        store: "全部"
      }
    });
    const statis = reactive({
      sumPrice: "",
      pureIncome: "",
      rateOfIncome: "",
      maxNumSell: "",
      maxPrice: ""
    });
    onMounted(() => {
      getSales();
      getStoreList();
    });

    const getSales = () => {
      getSaleList(queryData.query).then(response => {
        let res = response.data;
        dataSource.data = [];
        pag.pagination.total = res.length;
        statis.sumPrice = response.sumPrice;
        statis.pureIncome = response.pureIncome;
        statis.rateOfIncome = response.rateOfIncome;
        statis.maxNumSell = (Array.isArray(response.data) && response.data.length) ? (response?.rankingIncome
          ? response.rankingIncome[0].commodityName
          : '无') : '无';
        statis.maxPrice =
          (Array.isArray(response.data) && response.data.length)
            ? (response?.rankingIncome
              ? response.rankingIncome[0].maxPrice
              : 0): 0;
        for (let i = 0; i < res.length; i++) {
          dataSource.data.push({
            key: (i + 1).toString(),
            barcode: res[i].commodity.barcode,
            commodityName: res[i].commodity.commodityName,
            sellNum: res[i].sellNum,
            sellPrice: res[i].sellPrice,
            sellTime: res[i].sellTime,
            operation: ""
          });
        }
      });
    };
    const selectTime = val => {
      queryData.query.queryTime = val;
      if (val === "0") {
        dataTime.dataValue = "全部";
      }
      if (val === "1") {
        dataTime.dataValue = "今日";
      }
      if (val === "2") {
        dataTime.dataValue = "昨日";
      }
      if (val === "3") {
        dataTime.dataValue = "本月";
      }
      if (val === "4") {
        dataTime.dataValue = "上月";
      }
      if (val === "5") {
        dataTime.dataValue = "本年";
      }
    };
    const getStoreList = () => {
      selectStoreList().then(res => {
        selectData.stores = [
          {
            value: "全部",
            label: "全部"
          }
        ];

        for (let i = 0; i < res.data.length; i++) {
          selectData.stores.push({
            value: res.data[i].storeId,
            label: res.data[i].storeName
          });
        }
        value1.val = "全部";
      });
    };
    const focus = () => {
      console.log("focus");
    };

    const handleChange = value => {
      console.log(`selected ${value}`);
      queryData.query.store = value;
      getSales();
    };

    return {
      focus,
      handleChange,
      getSales,
      onMounted,
      selectTime,
      getStoreList,
      // onShowSizeChange,
      // selectStore,
      selectData,
      columns,
      pag,
      value1,
      dataSource,
      statis,
      dataTime
    };
  }
});
</script>

<style scoped >
#select_time {
  display: flex;
  justify-content: left;
  margin-top: 0px;
  height: 70px;
  background-color: rgb(248, 247, 244);
}
.time-button {
  margin-right: 50px;
  margin-left: 10px;
  margin-top: 15px;
}
#selectStore {
  display: flex;
  justify-content: left;
  margin-top: 0px;
  height: 70px;
  background-color: rgb(248, 247, 244);
}
#selectStore #data {
  margin-left: 10px;
  margin-top: 20px;
  font-size: 18px;
}
#store {
  margin-left: 85px;
  margin-top: 20px;
  font-size: 18px;
}
#statiticData {
  display: flex;
  justify-content: left;
  margin-top: 0px;
  height: 120px;
  background-color: rgb(225, 225, 224);
}
#statiticData > div {
  /* position: relative; */
  width: 25%;
  height: 120px;
  border-right: 1px solid rgb(201, 200, 200);
}

#statiticData > div > h1 {
  font-size: 15px;
  margin-top: 25px;
}
.result {
  font-size: 25px;
  color: red;
}
#datalist {
  margin-top: 10px;
}
</style>>
